<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>注册局部组件</title>  
  <style>  
    .product {  
      background-color: orange;  
    }  
  </style>  
</head>  
<body>  
    <!-- 将模板移到挂载点外部 -->
    <template id="product">  
      <div class="product">  
        <h2>{{title}}</h2>  
        <div>{{picture}}</div>  
        <div>商品价格: <span>{{price}}</span></div>  
        <p>{{description}}</p>  
        <button @click="favorite">收藏</button>
      </div>  
    </template> 

    <template id="nav">
      <h2>全局组件_应用程序导航</h2>
    </template>

    <template id="partNav">
      <div>-------------------------start_nav-------------------------------</div>
      <h2>局部组件_应用程序导航</h2>
      <div>-------------------------end_nav-------------------------------</div>
      <!--<product-item></product-item> 局部组件里面使用另外一个局部组件-->
      <product-item-cpn></product-item-cpn>nav内部的局部组件
    </template>

  <div id="app">
    <!-- <home-nav></home-nav> -->
    <!-- <product-item></product-item> -->
    <!-- <ProductItem></ProductItem> -->
     <home-nav></home-nav>
    <product-item></product-item>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 现在外部建好组件,然后导入到另外一个局部组件中
    const ProductItemCpn = {
      template: "#product",
      data() {
        return {
          title: "我是product的title",
          picture: "商品图片URL",
          price: 9.9,
          description: "商品描述信息"
        }
      },
      methods: {
        favorite() {
          console.log("执行收藏操作")
        }
      }
    }
    // vue的app组件(根组件)  
    const App = {
      data: function(){  
        return {  
          title: "我是标题",  
          content: "我是内容",  
        }
      },
      methods: {},
      components: {
        ProductItem: { // 局部组件一
          template: "#product",
          data() {
            return {
              title: "我是product的title",
              picture: "商品图片URL",
              price: 9.9,
              description: "商品描述信息"
            }
          },
          methods: {
            favorite() {
              console.log("执行收藏操作")
            }
          }
        },
        HomeNav: { // 局部组件二
          template: "#partNav",
          data() {
            return{
              title: "局部组件"
            }
          },
          mrthods: {},
          components: { // 在局部组件二里面引入另外一个局部组件
            ProductItemCpn // 引入另外一个组件,也可以直接在这里写一个组件,不用引入
          }
        }
      }
    }  
    // 1. 创建app  
    // 1.1 组件打算在哪里使用
    const app = Vue.createApp(App)  

    app.component("home-nav", {
      template: "#nav"
    })

    // 挂载   
    app.mount("#app")  
  </script>  

</body>  
</html>  
